<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：本集还是watch和computed的知识点。但是涉及太多js的内容
    -->
    <div id="demo">
        <input type="text" placeholder="请输入" v-model="keyword">
        <ul>
            <li v-for="(d) in filterDatanew">
                {{d.name}}={{d.age}}=={{d.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            keyword:"",
            dataArr:[
                {name:"马冬梅",age:"19",sex:"女"},
                {name:"周冬雨",age:"22",sex:"女"},
                {name:"周杰伦",age:"33",sex:"男"},
                {name:"温兆伦",age:"44",sex:"男"},
            ],
            filterData:[]
        },
        watch:{
            // keyword:{
            //     immediate:true,
            //     handler(n,o){
            //         // debugger
            //         this.filterData = this.dataArr.filter((p)=>{
            //             console.log(p)
            //             return p.name.indexOf(n) !== -1
            //         })
            //     }
            // },
        }
        ,computed:{
            filterDatanew(){
                return this.filterData = this.dataArr.filter((p)=>{
                    console.log(p)
                    return p.name.indexOf(this.keyword) !== -1
                })
            }
        }
    })
    </script>
</body>
</html>